<template>
	<view>
		<view class="topBox">
			<head-navbar :back="true">
				<view>
					<text>团队</text>
				</view>
			</head-navbar>

			<view class="content">
				<view class="box">
					<view class="todayBox">今日拼团活跃值：{{activeValue}}</view>
					<view class="contentBox">
						<view class="item">
							<view class="number">{{teamJoinTimes}}</view>
							<view class="name">拼团人次</view>
						</view>
						<view class="item">
							<view class="number">{{teamWinTimes}}</view>
							<view class="name">拼中人次</view>
						</view>
						<view class="item">
							<view class="number">{{teamNoWinTimes}}</view>
							<view class="name">未中人次</view>
						</view>
						<view class="item">
							<view class="number">{{teamNum}}</view>
							<view class="name">团队人数</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item item2">
					<view class="phone">会员账号</view>
					<view class="team">团队人数</view>
					<view class="status">活跃值</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{height:getTabbarContentHeight + 'px'}" >
			<view class="list2">
				<view class="item" v-for="item in list">
					<view class="phone">{{item.userCode}}</view>
					<view class="team">{{item.teamNum*1 + 1}}</view>
					<view class="status">{{item.activeValue*1 + item.teamActiveValue*1}}</view>
				</view>
			</view>
			<u-loadmore color='#949494' :status="status" bg-color="rgba(255,255,255,0)" margin-top='20' margin-bottom='15'
			 @loadmore='laodmore' :loadText="loadText" />
		</scroll-view>

	</view>
</template>

<script>
	import * as api from '../../api/group/index'
	export default {
		data() {
			return {
				status: 'loading',
				loadText: {
					loadmore: '获取数据错误,点击重新加载',
					loading: '努力加载中',
					nomore: '没有更多了哦'
				},
				list:[],
				getTabbarContentHeight:0,
				activeValue: 0, //自身活跃值
				teamJoinTimes: 0, //团队拼团人次
				teamWinTimes: 0, //团队拼中人次
				teamNoWinTimes: 0, //团队未拼中人次
				teamNum: 0, //团队人数
			}
		},
		onLoad() {
			this.getUserJoinInfo()
			this.getChildUserJoin()
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".topBox");
					info.boundingClientRect(function(data) { //data - 各种参数
						that.getTabbarContentHeight = res.windowHeight - data.height
					}).exec()
				}
			});
		},
		methods: {
			laodmore() {
				this.status = 'loading'
				this.list = []
				this.getChildUserJoin()
			},
			getUserJoinInfo() {
				api.getUserJoinInfo().then(res => {
					this.activeValue = res.data.dataBody.activeValue
					this.teamJoinTimes = res.data.dataBody.teamJoinTimes
					this.teamWinTimes = res.data.dataBody.teamWinTimes
					this.teamNoWinTimes = this.teamJoinTimes - this.teamWinTimes
					this.teamNum = res.data.dataBody.teamNum
				}).catch(err => {
                    
				})
			},
			getChildUserJoin() {
				api.getChildUserJoin().then(res => {
                     this.list = res.data.dataBody
					this.status = 'nomore'
				}).catch(err => {
                    	this.status = 'loadmore'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 20rpx;

		.todayBox {
			margin-bottom: 50rpx;
			font-size: 30rpx;
			font-weight: 600;
		}

		.box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 50rpx 20rpx;
			text-align: center;
		}

		.contentBox {
			display: flex;
			align-items: center;
			box-shadow: 0 0 10rpx #f4f4f4;

			.item {
				flex: 1;
				text-align: center;

				.number {
					font-weight: 600;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.list {
		padding: 0 20rpx;
        padding-bottom: 10rpx;
		.item {
			background: #FFFFFF;
			padding: 30rpx;
			display: flex;

			.phone,
			.team,
			.status {
				flex: 1;
				text-align: center;
				font-size: 26rpx;
			}
		}

		.item2 {
			font-weight: 600;
		}
	}
	.list2 {
		padding: 0 20rpx;
		.item {
			background: #FFFFFF;
			padding: 30rpx;
			display: flex;
	        margin-bottom: 10rpx;
			.phone,
			.team,
			.status {
				flex: 1;
				text-align: center;
				font-size: 26rpx;
			}
		}
	
		.item2 {
			font-weight: 600;
		}
	}
</style>
